<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ 7 | addZero }}</p>
        <p v-bind:title="9 | addZero">hello</p>
        <hr>

        <p>{{ 3.1415926 | round(3) }}</p>
        <p>{{ 1.2345 | round(1) }}</p>
        <hr>

        <p>{{ createDate | formatDate }}</p>
    </div>
</body>
<script>
    /**
     * 全局过滤器
     */ 
    Vue.filter('formatDate',function(target){
        if(!(target instanceof Date)){
            return target
        }
        var year = target.getFullYear()
        var month = target.getMonth()+1
        var day = target.getDate()

        return `${year}年${month}月${day}日`
    })

    new Vue({
        el:'#app',
        data:{
            num:5,
            createDate:new Date()
        },
        filters:{ // 局部过滤器
            // 为个位数补0
            addZero:function(target){ // 默认会自动将处理的目标数据作为参数传入
                // console.log(target)
                return target < 10 ? '0' + target : target
            },
            // 四舍五入，保留指定的小数位
            round:function(target,n){
                return target.toFixed(n)
            }
        }
    })
</script>
</html>